<template>
  <Dialog :title="dialogTitle" v-model="visible" width="50%">
    <!-- 车辆信息详情 -->
    <el-descriptions :column="3"  border class="asset-details">
      <!-- 第一行 -->
      <el-descriptions-item label="资产名称">
        {{ assetData.assetName  }}
      </el-descriptions-item>
      <el-descriptions-item label="资产编码">
        {{ assetData.assetCode  }}
      </el-descriptions-item>

      <!-- <el-descriptions-item  :rowspan="5" label="缩略图">
        <div class="image-preview">
          <img :src="assetData.imageUrl || defaultImage" alt="图片" />
        </div>
      </el-descriptions-item> -->
      <!-- 第二行 -->
      <el-descriptions-item label="资产分类">
        {{ assetData.assetCategory || '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="资产品牌">
        {{ assetData.assetBrand  ||    '--'}}
      </el-descriptions-item>

      <!-- 第三行 -->
      <el-descriptions-item label="资产型号">
        {{ assetData.model  ||  '--'}}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="购买价格">
        {{ assetData.purchasePrice ||  '--' }}
      </el-descriptions-item> -->
      <!-- 第四行 -->
      <!-- <el-descriptions-item label="购买日期">
        {{  formatDate(assetData.purchaseDate, 'YYYY-MM-DD')  ||  '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="折旧率">
        {{ assetData.annualDepreciationRate !== null ? assetData.annualDepreciationRate + '%' : '--' }}
      </el-descriptions-item> -->
      <!-- 第五行 -->
      <el-descriptions-item label="保质期">
        {{ formatDate(assetData.warrantyDate, 'YYYY-MM-DD') ||  '--'}}
      </el-descriptions-item>

      <el-descriptions-item label="使用人">
        <template #default>
          <user-label :user-id="assetData.userId" />
        </template>
      </el-descriptions-item>
      <!-- 第六行 -->

      <el-descriptions-item label="放置地址">
        {{ assetData.location ||  '--' }}
      </el-descriptions-item>
      <el-descriptions-item label="单位">
        <dict-tag :type="DICT_TYPE.OA_ASSET_UNIT ?? '' " :value="assetData.assetUnit ?? '--'" />
      </el-descriptions-item>

      <el-descriptions-item label="资产来源">
        {{  getAssetSourceLabel(assetData.source)  ||  '--' }}
      </el-descriptions-item>

      <el-descriptions-item label="当前状态">
        {{ getAssetStatusLabel(assetData.status) }}
      </el-descriptions-item>
      <el-descriptions-item label="" />
      <el-descriptions-item label="备注">
        {{ assetData.description ||  '--' }}
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin-top: 20px;">
      <AssetRepairDetail :asset-name="assetData.assetName" />
    </div>

  </Dialog>

</template>



<script setup lang="ts">
import { ref, reactive, defineExpose } from 'vue'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import UserLabel from '@/views/system/user/UserLabel.vue'
import defaultImage from '@/assets/ai/ziran.jpg'
import AssetRepairDetail from '@/views/oa/assetinfo/components/AssetRepairDetail.vue'

const visible = ref(false)
const dialogTitle = ref('')

const assetData = reactive({
  imageUrl: '',
  assetCategory: '',
})

const getAssetCategoryLabel = (value: string): string | null => {
  const dict = getStrDictOptions(DICT_TYPE.OA_ASSET_CLASSIFICATION).find(
    item => item.value === value
  )
  return dict ? dict.label : null
}

const getAssetBrandLabel = (value: string): string | null => {
  const dict = getStrDictOptions(DICT_TYPE.OA_ASSET_BRAND).find(
    item => item.value === value
  )
  return dict ? dict.label : null
}

const getAssetStatusLabel = (value: number): string | null => {
  const dict = getStrDictOptions(DICT_TYPE.OA_ASSET_STATUS).find(
    item => item.value === String(value)
  )
  return dict ? dict.label : null
}

const getAssetSourceLabel = (value: number): string | null => {
  const dict = getStrDictOptions(DICT_TYPE.OA_ASSET_SOURCE).find(
    item => item.value === String(value)
  )
  return dict ? dict.label : null
}




const open = (type: string, data: any) => {
  visible.value = true
  dialogTitle.value = type === 'view' ? '查看信息' : '编辑信息'
  Object.assign(assetData, data)
}





// 暴露 open 方法给父组件
defineExpose({
  open
})

</script>
<style scoped>
.vehicle-details {
  margin-top: 20px;
}

.image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.driver-info {
  margin-top: 10px;
  font-weight: bold;
}

.mileage-note {
  font-size: 12px;
  color: #666;
}
</style>
